<template>
  <div class="order-list-container"
    ref="wrap">
    <el-breadcrumb separator="/">
      <el-breadcrumb-item>设置</el-breadcrumb-item>
      <el-breadcrumb-item :to="{ path: '/index/supply_setting' }">供应设置</el-breadcrumb-item>
      <el-breadcrumb-item>酒店销售政策</el-breadcrumb-item>
    </el-breadcrumb>
    <div class="easy-content">
      <el-form :rules="rules"
        :model="supMaid"
        ref="formData">
        <h1>销售政策</h1>
        <el-form-item required
          label="支付手续费：">
          固定收取订单的<span style="color:red">1%</span>作为支付手续费
        </el-form-item>
        <el-form-item label="服务手续费："
          required>
          <el-radio :label="1"
            v-model="supMaid.state">按订单固定金额设置</el-radio>
          <el-radio :label="2"
            v-model="supMaid.state">按订单金额比例设置</el-radio>
        </el-form-item>
        <el-form-item label="费用金额："
          v-if="supMaid.state == 1"
          prop="num">
          <el-input-number controls-position="right"
            v-model="supMaid.num"
            :min="0"
            :max="1000"></el-input-number>&nbsp;&nbsp;
          <span>元</span>
        </el-form-item>
        <el-form-item label="费用金额："
          v-if="supMaid.state == 2"
          prop="num">
          <el-input-number controls-position="right"
            v-model="supMaid.ratio"
            :min="0"
            :max="100"></el-input-number>&nbsp;&nbsp;
          <span>%</span>
        </el-form-item>
        <h1>分销分配</h1>
        <el-form-item label="酒店内部推荐订单奖励："
          required></el-form-item>
        <el-form-item class="clearfix">
          <el-form-item prop="insideUser">
            <span>员工奖励金额：&nbsp;&nbsp;</span>
            <el-input-number controls-position="right"
              v-model="supMaid.insideUser"
              :min="0"
              :max="100-parseFloat(supMaid.insideHotel)"></el-input-number>&nbsp;&nbsp;
            <span>%</span>
          </el-form-item>
          <el-form-item style="margin-top:15px;"
            prop="insideHotel">
            <span>酒店奖励金额：&nbsp;&nbsp;</span>
            <el-input-number controls-position="right"
              v-model="supMaid.insideHotel"
              :min="0"
              :max="100-parseFloat(supMaid.insideUser)"></el-input-number>&nbsp;&nbsp;
            <span>%</span>
          </el-form-item>
        </el-form-item>
        <el-form-item label="酒店以外推荐订单奖励："
          required>

        </el-form-item>
        <el-form-item>
          <el-form-item prop="outerUser">
            <span>员工奖励金额：&nbsp;&nbsp;</span>
            <el-input-number controls-position="right"
              v-model="supMaid.outerUser"
              :min="0"
              :max="100-parseFloat(supMaid.outerHotel)"></el-input-number>&nbsp;&nbsp;
            <span>%</span>
          </el-form-item>
          <el-form-item style="margin-top:15px;"
            prop="outerHotel">
            <span>酒店奖励金额：&nbsp;&nbsp;</span>
            <el-input-number controls-position="right"
              v-model="supMaid.outerHotel"
              :min="0"
              :max="100-parseFloat(supMaid.outerUser)"></el-input-number>&nbsp;&nbsp;
            <span>%</span>
          </el-form-item>
        </el-form-item>
        <div class="information-btns"
          :style="{width:width}">
          <el-button type="primary"
            size="small"
            @click="sure('formData')">保存</el-button>
          <el-button @click="back"
            size="small">取消</el-button>
        </div>
      </el-form>

    </div>

  </div>
</template>

<script>
import { getSellInfo, setHotelSell, setThirdSell } from "@/public/js/setting";
export default {
  components: {},
  props: {},
  data() {
    return {
      width: "",
      id: "",
      supMaid: {},
      rules: {
        num: [{ required: true, message: "请输入费用金额", trigger: "blur" }],
        insideHotel: [
          { required: true, message: "请输入酒店内奖励比例", trigger: "blur" }
        ],
        insideUser: [
          { required: true, message: "请输入员工内奖励比例", trigger: "blur" }
        ],
        outerHotel: [
          { required: true, message: "请输入酒店外奖励比例", trigger: "blur" }
        ],
        outerUser: [
          { required: true, message: "请输入员工外奖励比例", trigger: "blur" }
        ]
      }
    };
  },
  watch: {},
  computed: {},
  methods: {
    back() {
      this.$router.back();
    },
    //获取销售政策信息
    _getSellInfo() {
      getSellInfo({ id: this.id }).then(res => {
        this.supMaid = res.data.supMaid
          ? res.data.supMaid
          : {
              num: 0,
              state: 1,
              insideHotel: 0,
              insideUser: 0,
              outerHotel: 0,
              outerUser: 0,
              upPerson: 0
            };
      });
    },
    sure(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          setHotelSell({
            id: this.id,
            type: this.supMaid.state,
            money: this.supMaid.num,
            ratio: this.supMaid.ratio,
            insideUser: this.supMaid.insideUser,
            insideHotel: this.supMaid.insideHotel,
            outerUser: this.supMaid.outerUser,
            outerHotel: this.supMaid.outerHotel
          }).then(res => {
            if (!res.data.errCode) {
              this.$message({
                type: "success",
                message: "修改成功"
              });
            }
          });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    }
  },
  created() {
    this.id = this.$route.query.id;
    this._getSellInfo();
  },
  mounted() {
    this.width = this.$refs.wrap.offsetWidth + "px";
  }
};
</script>
<style lang="scss" scoped>
.easy-content {
  h1 {
    font-size: 16px;
    text-align: left;
    color: #6d2377;
    padding: 15px 0;
  }
  .el-upload--picture-card {
    font-size: 28px;
    color: #8c939d;
    width: 100px;
    height: 100px;
    line-height: 100px;
    text-align: center;
  }
  .information-btns {
    position: fixed;
    bottom: 0;
    box-sizing: border-box;
    padding: 10px;
    background: #fff;
    box-shadow: 0px -1px 4px rgba(0, 0, 0, 0.1);
    margin-left: -30px;
    z-index: 1111;
  }
  .avatar {
  }
}
</style>